<script setup>
import {onMounted, ref} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";

const teacherList = ref([]);

const teacher = ref({});

const dialogTitle = ref("讲师详情");

const dialogVisible = ref(false);

const LoadTeacherList = () => {
  axios.get(BASE_URL + '/api/teacher/getList').then((response) => {
    if (response.data.code == 2000) {
      teacherList.value = response.data.data;
      console.log(teacherList.value)
    } else
      ElMessage.error("获取讲师列表失败");
  })
}

const info = (id) => {
  dialogVisible.value = true;
  axios.get(BASE_URL + '/api/teacher/getDetail/' + id).then((response) => {
    if (response.data.code == 2000) {
      teacher.value = response.data.data;
      console.log(teacher.value);
    } else
      ElMessage.error("获取讲师详情失败");
  })
}

const exit = () => {
  dialogVisible.value = false;
  teacher.value = {};
}

onMounted(() => {
  LoadTeacherList();
})
</script>

<template>
  <div>
    <el-card style="max-width: 480px;text-align: center;margin: 10px;float: left;" v-for="item in teacherList">
      <template #header>
        <div class="card-header">
          <span>{{ item.teacherName }}</span>
        </div>
      </template>
      <img :src="BASE_URL+item.avatar"/>
      <p>{{ item.title }}</p>
      <template #footer>
        <el-button type="primary" @click="info(item.teacherId)">点我查看详情</el-button>
      </template>
    </el-card>
  </div>
  <div style="height: 100px"></div>
  <el-dialog :title="dialogTitle"
             style="width: 1000px;padding: 40px;"
             v-model="dialogVisible"
             :before-close="exit"
  >
    <el-descriptions border>
      <el-descriptions-item
          :rowspan="2"
          :width="140"
          label="Photo"
          align="center"
      >
        <el-image
            style="width: 100px; height: 100px"
            :src="BASE_URL+teacher.avatar"
        />
      </el-descriptions-item>
      <el-descriptions-item label="讲师姓名">{{ teacher.teacherName }}</el-descriptions-item>
      <el-descriptions-item label="头衔">{{ teacher.title }}</el-descriptions-item>
      <el-descriptions-item label="简介">{{ teacher.description }}</el-descriptions-item>
      <el-descriptions-item label="入驻时间">{{ teacher.createTime }}</el-descriptions-item>
    </el-descriptions>

  </el-dialog>

</template>

<style scoped>

</style>